<template>
  <div class="invoice-declaration-con">
    <PCard class="invoice-declaration-pdf" :isCardBorder="false" :shadow="'never'" :isHeadBottomBorder="true"
      :bodyStyle="{ width: '100%' }">
      <div slot="header" class="pdf-title">
        <h3><span class="icon"></span>发票 <span style="color: red;">{{ titleStr }}</span> 声明</h3>
        <a-button type="primary" @click="goto" icon="left">返回 </a-button>
      </div>
      <div class="pdf-body">
        <!-- <pdfBox :url="pdfUrl"></pdfBox> -->
          <!-- style='border: 1px solid #ccc;height: 600px' -->
          <p-PreviewShow :model="'page'" :event="()=>{}" :url='pdfUrl' :isShowWatermark="true" :config="{title:'',visible: false, loading: false, width: '50vw',height: '60vh' }"></p-PreviewShow>
      </div>
      <div class="pdf-foot">
        <a-button type="primary" icon="edit"  :disabled="signAgreementBtnDisabled" @click="signAgreement"> 签署协议</a-button>
      </div>
    </PCard>
    <a-modal :title="winConfig.title" :visible="winConfig.visible" @ok="handleOk" :okText="winConfig.isAuthentication===true?'确认签约':'立即验证'"
      :cancelText="winConfig.cancelText" @cancel="handleCancel" wrapClassName="winConfig-con">
      <div class="winConfig-doby">
        <a-form-model  v-if="winConfig.isAuthentication === true" :layout="winConfig.layout" :model="winConfig" v-bind="{ ...winConfig.formItemLayout }">

          <a-form-model-item label="法人手机号">
            <div>{{ winConfig.phone }}</div>
          </a-form-model-item>
          <a-form-model-item label="验证码">
            <div style="display: flex; justify-content: flex-start; align-items: center;">
              <a-input v-model="winConfig.code" placeholder="请输入验证码" />
              <a-button :disabled="winConfig.btnDisabled" @click="modelBtnEvent" type="primary">{{ winConfig.codeBtnLabel
              }}</a-button>
            </div>
          </a-form-model-item>

        </a-form-model>
        <a-result v-if="winConfig.isAuthentication === false" status="warning" title="企业法人身份验证及手机实名认证还未完成！"
          sub-title="点击【立即验证】按钮前去完成认证"></a-result>
      </div>
    </a-modal>
  </div>
</template>

<script>
// 发票 作废/冲红 声明
import getDataForDB from '@/api/qsbBusinessManagement'


export default {
  name: 'InvoiceDeclaration',
  props: {},
  // components: { pdfBox },
  data() {
    return {
      title: '', // 作废 或者 冲红 需要根据开票日期来判断 当前为纸质发票时==》 当 签约日期 与 开票日期 在同月时显示【作废】，当 签约日期 与 开票日期 不在同月时显示【冲红】 当前为电子票时 一律显示【冲红】
      pdfUrl: '', //'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/qsb/businessLicense/1679968661043_%E5%B0%8F%E7%BA%A2%E4%B9%A6(%E7%AC%AC%E5%9B%9B%E7%89%88).pdf',
      // InvoiceType: '1', // 发票类型； 1 为电子发票  2 为纸质发票
      // SigningDate: '2023-04-17', // 签约日期
      // InvoicingDate: '2023-04-01', // 开票日期
      titleStr: '作废',
      signAgreementBtnDisabled:false,
      winConfig: {
        layout: 'horizontal',
        formItemLayout: { labelCol: { span: 4 }, wrapperCol: { span: 20 }, },
        btnDisabled: false,
        codeBtnLabel: '发送验证码',
        visible: false,
        title: '签署声明',
        isAuthentication: true, // 企业法人身份和手机是否实名验证 ； true 表示已验证  false 表示未验证
        phone: '--', // 手机号
        code: '', // 验证码
        okText: '确认签约', // 确认签约  立即验证
        cancelText: '关闭',
      },
      setTimer: null,
      // 接口返回的数据
      detailInfo: {},
    }
  },
  computed: {
    // 仅读取
    // titleStr: function () {
    //   let res = ''
    //   if (this.InvoiceType == '1') {
    //     res = '冲红'
    //   }
    //   if (this.InvoiceType == '2') {
    //     const date1 = this.SigningDate.split('-')
    //     const date2 = this.InvoicingDate.split('-')
    //     const date1_ = date1[0] + date1[1]
    //     const date2_ = date2[0] + date2[1]
    //     if (date1_ == date2_) {
    //       res = '作废'
    //     } else {
    //       res = '冲红'
    //     }
    //   }
    //   return res
    // },
  },
  mounted() {
    const bizId = this.$route.query.bizId
    console.log('bizId====>', bizId);
    if(bizId){
      this.getPageData(bizId)
    }
  },
  methods: {
    /**
     * 签署协议
     */
    signAgreement() {
      this.winConfig.visible = true
    },
    goto() {
      this.$router.go(-1)
    },
    handleOk() {
      if (this.winConfig.isAuthentication === true) {
        // this.winConfig.code
        this.saveData()
      }
      if (this.winConfig.isAuthentication === false) {
        // 立即验证
        this.$router.push({
          path: '/registerProcess/registerProcess',
          query: { type: '3' }
        });
      }
    },
    modelBtnEvent() {
      this.sendSMSCode()
      this.countDownFun()
    },
    countDownFun() {
      let seconds = 120;// 30
      const oldLabel = '发送验证码'
      this.winConfig.btnDisabled = true
      this.winConfig.codeBtnLabel = `(${seconds})${oldLabel}`
      let promise = new Promise((resolve, reject) => {
        // console.log('************************启动定时器************************');
        this.setTimer = setInterval(() => {
          seconds -= 1;
          this.winConfig.codeBtnLabel = `(${seconds})${oldLabel}`
          // console.log(`************************启运行定时器 ${seconds}************************`);
          if (seconds <= 0) {
            this.winConfig.codeBtnLabel = oldLabel
            resolve(this.setTimer)
          }
        }, 1000)
      })
      promise.then((setTimer) => {
        // console.log('************************清理定时器************************');
        clearInterval(setTimer);
        this.winConfig.btnDisabled = false
      })

    },
    handleCancel() {
      this.winConfig.visible = false
    },
    /**
     * 发送验证码
     */
    sendSMSCode() {
      const param = { phone: this.winConfig.phone, transCode: '50036' }
      getDataForDB('发送登陆验证码', param).then(res => {
        const { success, message } = res
        if (success) {
          this.signAgreementBtnDisabled = true
          this.$message.warning(message || '验证码发送成功')

        } else {
          this.signAgreementBtnDisabled = false
          this.$message.warning(message || '验证码发送失败')
        }
      })
    },
    /**
     * 创建退票签约合同
     */
    getPageData(invcId) {
      const param = { invcId }
      getDataForDB('创建退票签约合同', param).then(res => {
        const { success, message,result } = res
        if (success) {
          this.detailInfo = result
          const { legalPhone, titleTypeName, agreeUrl,authFlag } = result
          this.winConfig.phone = legalPhone
          this.titleStr = titleTypeName
          this.pdfUrl = agreeUrl
          if(authFlag==1){
            // 需要法人核验 authFlag==1
            this.winConfig.visible = true
            this.winConfig.isAuthentication = false
            this.signAgreementBtnDisabled = true

          }
        } else {

          this.$message.warning(message || '获取数据失败')
        }
      })
    },
    saveData() {
      const param = {
        "agreeId": this.detailInfo.agreeId ,
        "captcha": this.winConfig.code,
        "invcId":  this.detailInfo.invcId,
        "legalPhone":  this.detailInfo.legalPhone
      }
      getDataForDB('签署退票签约合同', param).then(res => {
        const { success, message } = res
        if (success) {
          this.signAgreementBtnDisabled = true
          this.winConfig.visible = false
          this.$message.success('签署退票签约合同成功')
          this.goto()
        } else {
          this.signAgreementBtnDisabled = false
          this.$message.warning(message || '签署退票签约合同失败')
        }
      })
    }
  }
}
</script>

<style lang="less">
.invoice-declaration-con {
  .invoice-declaration-pdf {
    .pdf-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h3 {
        font-size: 18px;
        color: #333333;
        font-weight: bolder;
      }
    }

    .pdf-body {
      height: calc(100vh - 90px - 73px - 59px - 53px);
    }

    .pdf-foot {
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }


}

.winConfig-con {
  .ant-modal {
    .ant-modal-content {
      .ant-modal-header {
        .ant-modal-title {
          text-align: left;
        }
      }

      .ant-modal-body {
        .winConfig-doby {}
      }
    }
  }
}
</style>
